<template>
  <div class="app-container">
    <!--查询表单  inline="true"在一行显示-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="bannerQuery.title" placeholder="标题"/>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="bannerQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="bannerQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="pageBannerCondition()">查询</el-button>
      <el-button type="default" @click="resetData()">重置</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="名称" width="80" />

      <el-table-column label="banner预览" width="200">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-popover
              placement="right"
              title=""
              trigger="hover">
              <img :src="scope.row.imageUrl" style="max-width: 1000px"/>
              <img slot="reference" :src="scope.row.imageUrl" :alt="scope.row.imageUrl" style="max-height: 50px;max-width: 130px">
            </el-popover>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="linkUrl" label="链接地址" />

      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

      <el-table-column prop="gmtModified" label="修改时间" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="update(scope.row.id)">修改</el-button>

          <el-dialog title="banner修改" :visible.sync="dialogFormVisible" top="10vh" width="50%" :close-on-click-modal="false"  center>
            <el-form label-width="120px">
              <el-form-item label="标题">
                <el-input v-model="banner.title"/>
              </el-form-item>

              <el-form-item label="链接地址">
                <el-input v-model="banner.linkUrl"/>
              </el-form-item>

              <el-form-item label="排序">
                <el-input-number v-model="banner.sort" controls-position="right" :min='0'/>
              </el-form-item>

              <!-- banner图 -->
              <el-form-item label="banner图">
                <!-- 缩略图 -->
                <div class="demo-image__preview" style="height: 100px">
                  <el-popover
                    placement="right"
                    title=""
                    trigger="hover">
                    <img slot="reference" :src="banner.imageUrl" :alt="banner.imageUrl" style="max-height: 100px;max-width: 200px">
                    <img :src="banner.imageUrl" style="max-width: 1000px"/>
                  </el-popover>
                </div>
                <el-upload
                  class="upload-demo"
                  :action="BASE_API+'/eduoss/fileoss/uploadOssFile'"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleAvatarSuccess"
                  :on-error="errorHandle"
                  multiple>
                  <el-button size="small" type="primary" :disabled="uploadBtnDisabled">上传/更换</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过10MB</div>
                </el-upload>

              </el-form-item>

              <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="updateBannerById">提交</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>

          <!--<router-link :to="'/teacher/edit/'+scope.row.id">-->
            <!--<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>-->
          <!--</router-link>-->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="pageBannerCondition"
    />
  </div>
</template>

<script>
  //引入teacher.js
  import banner from '@/api/cms/banner'

  //export表示可以被别人调用
  export default {
    //定义当前页面使用的变量和初始值
    data(){
      return{
        current: 1,
        limit: 10,
        total: 0,//总记录数
        bannerQuery: {},//查询条件
        list: null, //用于保存接口返回的数据
        listLoading: true,
        dialogFormVisible: false,
        banner:{},
        uploadBtnDisabled:false,
        saveBtnDisabled: false, // 保存按钮是否禁用
        BASE_API: process.env.BASE_API,
        srcList: []
      }
    },
    //在页面渲染之前执行
    created() {
      this.pageBannerCondition()
    },
    //自定义方法，调用teacher.js里的方法
    methods:{
      //分页查询讲师列表  current=1意为默认为1
      pageBannerCondition(current=1){
        this.current = current
        banner.pageBannerCondition(this.current,this.limit,this.bannerQuery)
          .then(response=>{
            this.listLoading =false
            //接口成功返回数据
            this.list = response.data.data
            this.total = response.data.total
          })
      },

      resetData() {
          this.bannerQuery = {}
          this.pageBannerCondition()
      },

      removeDataById(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          banner.removeById(id)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.pageBannerCondition()
          })
        })
      },


      update(id){
        this.banner = {}
        banner.getBannerById(id)
          .then(response=>{
            this.banner = response.data
          });
        this.dialogFormVisible = true
      },

      //上传成功的方法
      handleAvatarSuccess(response){
        this.uploadBtnDisabled= false
        this.saveBtnDisabled= false
        this.banner.imageUrl = response.data
      },
      errorHandle(){
        this.uploadBtnDisabled= false
        this.saveBtnDisabled= false
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        if (isJPG && isLt2M) {
          this.uploadBtnDisabled= true
          this.saveBtnDisabled= true
        }
        return isJPG && isLt2M
      },
      // 保存
      updateBannerById() {
        if (this.banner.title==''){
          this.$message({
            type: 'warning',
            message: '请填写banner标题!'
          });
          this.saveBtnDisabled = false
          return
        }
        this.saveBtnDisabled = true
        this.banner.gmtCreate = null
        this.banner.gmtModified = null
        banner.updateBannerById(this.banner)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功✔'
            });
            this.saveBtnDisabled = false
            this.dialogFormVisible = false
            this.pageBannerCondition()
          })
          .catch(error =>{
            this.saveBtnDisabled = false
          })
      }

    }
  }
</script>

<style>

</style>

